<template>
  <div class="full-container">
    <el-card style="height: 100%; width: 100%">
      <template #header>
        <div class="card-header">
          <span>编辑地区数据</span>
        </div>
      </template>

      <div class="editor-wrapper">
        <AmoAYunMonacoEditorVue3
          v-model="fileContent"
          language="json"
          :style="{ height: height + 'px' }"
          ref="editor"
        />
      </div>

      <div class="button-group">
        <el-button type="primary" @click="saveFile" :loading="isSaving">保存修改</el-button>
        <el-button @click="reloadFile" :loading="isLoading">重新加载</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { AmoAYunMonacoEditorVue3 } from '@amoayun/monaco-editor-vue3'
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'

const height = ref(window.innerHeight - 300)
console.log('height:', height)
const fileContent = ref('')
const isLoading = ref(false)
const isSaving = ref(false)

// 读取文件内容
const loadFile = async () => {
  try {
    isLoading.value = true
    // 通过IPC调用主进程读取文件
    const result = await window.electronAPI.readFile('resources/leimu.txt')
    if (result.success) {
      // 格式化JSON以提高可读性
      const parsedContent = JSON.parse(result.content)
      console.log('parsedContent:', parsedContent)
      // 使用nextTick确保DOM更新后再设置内容
      await nextTick()
      fileContent.value = JSON.stringify(parsedContent, null, 2)
      ElMessage.success('文件加载成功')
    } else {
      ElMessage.error(`文件加载失败: ${result.message}`)
    }
  } catch (error) {
    ElMessage.error(`加载文件时发生错误: ${error.message}`)
    console.error('加载文件错误:', error)
  } finally {
    isLoading.value = false
  }
}

// 保存文件内容
const saveFile = async () => {
  try {
    // 验证JSON格式
    try {
      JSON.parse(fileContent.value)
    } catch (jsonError) {
      ElMessage.error(`JSON格式错误: ${jsonError.message}`)
      return
    }

    isSaving.value = true
    // 通过IPC调用主进程保存文件
    const result = await window.electronAPI.saveFile('resources/leimu.txt', fileContent.value)
    if (result.success) {
      ElMessage.success('文件保存成功')
    } else {
      ElMessage.error(`文件保存失败: ${result.message}`)
    }
  } catch (error) {
    ElMessage.error(`保存文件时发生错误: ${error.message}`)
    console.error('保存文件错误:', error)
  } finally {
    isSaving.value = false
  }
}

// 重新加载文件
const reloadFile = () => {
  loadFile()
}

// 组件挂载时加载文件
onMounted(() => {
  // 延迟加载，确保DOM完全渲染后再执行
  setTimeout(() => {
    loadFile()
  }, 100)
})
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.editor-wrapper {
  margin: 20px 0;
  height: 100%;
}

.button-group {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}
</style>
